<template>
    <div id="essayContent">
        <!-- 随笔容器 -->
        <el-container>
            <!-- el-时间线 -->
            <el-timeline class="animate__animated animate__fadeInLeft">
                <!-- 时间线的节点 -->
                <el-timeline-item
                        :color="essay.borderColor"
                        :key="essay.id"
                        :timestamp="essay.createTime | dataFormat"
                        placement="top"
                        v-for="essay in essayList"> <!-- 边框颜色 - key值 - 时间戳内容 - 时间戳位置 - 循环内容读取 -->

                    <!-- 用一个 card 来装内容 -->
                    <!-- 文本字母间距 -->     <!-- 动态绑定样式 -->
                    <el-card style="letter-spacing: 1px;" :style="calcuteStyle(essay)">
                        <!-- 标题 -->
                        <h2 v-if="essay.title">{{essay.title}}</h2>
                        <!-- 内容 -->
                        <div class="typo" v-html="essay.content"></div>
                        <!-- 如果有图片 -->
                        <el-image v-if="essay.image" :src="essay.image"></el-image>
                    </el-card>

                </el-timeline-item>
            </el-timeline>
        </el-container>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                essayList: []
            }
        },
        created() {
            /* 初始化 essay 列表 */
            this.getEssayList()
        },
        methods:{
            async getEssayList(){
                let targetDiv = document.getElementById('essayContent');
                let loadingInstance = this.$loading({ fullscreen: false, target:targetDiv, text:'加载中' });
                const {data:res} = await this.$basic.get('/essay');
                loadingInstance.close()
                if (res.code === 200){
                    this.essayList = res.data.sort((a, b) => {
                        return b.createTime.localeCompare(a.createTime)
                    })
                    this.essayList.forEach( (essay) => {
                        // console.log(essay.content)
                        //将 md 格式转 html
                        essay.content = this.$marked(essay.content)
                        //console.log(essay.content)
                        /* 获取边框颜色 */
                        essay.borderColor = essay.color.split(",")[0]+','+essay.color.split(",")[1]+ ','+essay.color.split(",")[2]+')'
                        /* 获取文本颜色，可以选择其设置为背景颜色 */
                        essay.contentColor = essay.color.split(",")[0]+','+essay.color.split(",")[1]+ ','+essay.color.split(",")[2]+',0.1)'
                    } )
                }
            },
            calcuteStyle(essay){
                return 'border: 5px solid '+essay.borderColor+'; ' +    /* 边框宽度 ，边框颜色（和结点颜色保持一致）*/
                    'background-color: rgba(255,255,255,0.9);' +    /* 文本内容的背景颜色 */
                    'box-shadow: 0 0 40px -10px '+essay.borderColor /* 盒子的阴影设置 */

            }
        }
    }
</script>

<style scoped lang="less">

    .el-timeline {
        font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif !important;

        width: 80%;
        margin: 0 auto;

        .el-image {
            width: 200px;
        }
        .el-card{
            border-radius: 20px;
            box-shadow: 0 0 15px 5px white;
        }
    }

    @media screen and (max-width: 768px){
        .el-timeline{
            width: 98%;
            padding: 2px;
        }

        .el-timeline /deep/ .el-timeline-item__wrapper{
            padding-left: 15px !important;
        }
    }
</style>
